<template>
  <div id="login">
    <vue-particles color="#ffd700" :particleOpacity="0.9" :particlesNumber="80" shapeType="star" :particleSize="4"
      linesColor="#ffd700" :linesWidth="1" :lineLinked="true" :lineOpacity="0.5" :linesDistance="150" :moveSpeed="10"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></vue-particles>
    <div class="login-container" style="position: relative; z-index: 1;">
      <div class="login-title">智能账单分类管理器</div>
      <div class="login-content">
        <div class="login-form">
          <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="account" class="input-text"></el-input>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="password" show-password
            class="input-text"></el-input>
          <el-row class="submit-button-container">
            <el-col :span="6">
              <el-button class="submit-button" type="primary" round v-on:click="login">登录</el-button>
            </el-col>
            <el-col :span="6">
              <el-button class="submit-button" type="warning" round v-on:click="clearFields">清空</el-button>
            </el-col>
            <el-col :span="6">
              <el-button class="submit-button" type="success" round v-on:click="showRegisterDialog">注册</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 注册弹窗 -->
    <el-dialog title="注册" :visible.sync="registerDialogVisible" width="30%">
      <el-form :model="registerForm" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="registerForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { post } from '../../utils/http'
import { Message } from 'element-ui'

export default {
  name: 'Login',
  data() {
    return {
      account: '',
      password: '',
      registerDialogVisible: false,
      registerForm: {
        account: '',
        password: '',
      }
    }
  },
  mounted() { },
  methods: {
    login: function () {
      if (this.account === '') {
        Message.error({ message: '账号不能为空!' })
        return
      }
      if (this.password === '') {
        Message.error({ message: '密码不能为空!' })
        return
      }
      post('/user/login', { name: this.account, password: this.password }).then(
        (res) => {
          if (res.description === 'success') {
            Message.success({ message: '登录成功' })
            this.$router.push({ path: '/system/main' })
            sessionStorage.setItem('userId', res.data[0].id)
            sessionStorage.setItem('houseId', res.data[0].houseId)
            sessionStorage.setItem('name', res.data[0].name)
            sessionStorage.setItem('isAdmin', res.data[0].isAdmin)
            sessionStorage.setItem('isLoggedIn', true) // 添加登录状态
          }
        }
      )
    },
    showRegisterDialog: function () {
      this.registerDialogVisible = true;
    },
    register: function () {
      let namePattern = /^[a-zA-Z0-9_-]{2,16}$/
      let passwordPattern = /^[a-zA-Z0-9]{8}$/
      if (this.registerForm.account === '') {
        Message.error({ message: '账号不能为空!' })
        return
      }
      if (this.registerForm.password === '') {
        Message.error({ message: '密码不能为空!' })
        return
      }
      if (!namePattern.test(this.registerForm.account)) {
        Message.error({
          message: '用户名必须由2-16位，字母、数字、下划线组成!',
        })
        return
      }
      if (!passwordPattern.test(this.registerForm.password)) {
        Message.error({
          message: '密码必须8位字母、数字组成，不能含有非法字符!',
        })
        return
      }

      post('/user/register', {
        name: this.registerForm.account,
        password: this.registerForm.password,
        isAdmin: 1,
      }).then((res) => {
        if (res.description === 'success') {
          Message.success({ message: '注册成功，请登录' })
          this.registerDialogVisible = false;
          this.registerForm.account = '';
          this.registerForm.password = '';
        }
      })
    },
    clearFields: function () {
      this.account = ''
      this.password = ''
    },
  },
}
</script>


<style>
#login {
  height: 100%;
  background: url('https://cdn.pixabay.com/photo/2024/06/18/03/40/finance-8836903_1280.jpg') 50% 50% / cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 确保内容水平居中 */
}

.login-title {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 2px;
  margin-bottom: 30px;
  /* 标题和表单之间的间距 */
  background-image: linear-gradient(to right, #ff6b6b, #6ecfc8, #ac16f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  padding: 10px 0;
}

.login-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  /* 新增容器样式 */
  background: rgba(255, 255, 255, 0.8);
  /* 半透明白色背景 */
  border-radius: 50px;
  /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  padding: 30px;
  /* 内部填充 */
  width: 400px;
  /* 容器宽度 */
  text-align: center;
  /* 内容居中 */
}

.login-form {
  width: 100%;
  /* 表单宽度占满容器 */
}

.input-text {
  margin-bottom: 25px;
  width: 85%;
  /* 输入框宽度占满表单 */
}

.submit-button {
  width: 100%;
}

.submit-button-container {
  display: flex;
  justify-content: space-between;
}
</style>